<template>
  <div class="suggest-wrapper">
    <scroll
      class="scroll"
      ref="scroll"
      :data="result"
      :pullup="true"
      :pulldown="true"
      :beforeScroll="true"
      @scrollToEnd="searchMore"
      @scrollToTop="refresh"
      @beforeScroll="listScroll"
      >
      <ul class="suggest-list">
        <loading v-show="loadingTop" :title="loadingText"></loading>
        <li
          class="zhida"
          v-show="zhida.singername && showSinger"
          @click="handleZhidaClick"
          >
          <i class="icon-mine"></i>
          <span>{{zhida.singername}}</span>
        </li>
        <li
          v-for="(item, index) in result"
          :key="index"
          @click="handleItemClick(item)"
          >
          <i class="icon-music"></i>
          <span>{{item.songname}}</span>
          <span> -- {{item.singer[0].name}}</span>
        </li>
        <loading v-show="hasMore" :title="loadingText"></loading>
      </ul>
    </scroll>
    <div v-show="!result.length && !hasMore">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
import { getSearch } from 'api'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import NoResult from 'base/no-result/no-result'
import { playlistMixin } from 'common/js/mixin'

export default {
  name: 'suggest',
  mixins: [playlistMixin],
  components: {
    Scroll,
    Loading,
    NoResult
  },
  props: {
    query: {
      type: String,
      default: ''
    },
    showSinger: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      page: 1,
      result: [],
      zhida: {},
      hasMore: true, // 是否还有更多的数据
      loadingText: '',
      loadingTop: false
    }
  },
  methods: {
    searchMore () {
      if (this.hasMore) {
        this.page++
        this._getSearch(true)
      }
    },
    refresh () {
      this.loadingTop = true
      this._getSearch()
    },
    handleZhidaClick () {
      this.$router.push({
        path: `/search/${this.zhida.singerid}`
      })

      this.setSinger({
        singer_name: this.zhida.singername,
        singer_pic: this.zhida.pic
      })

      this.$emit('select')
    },
    handleItemClick (item) {
      const song = {
        album: item.albumname,
        albumpic: item.albumpic,
        artist: item.singer[0].name,
        duration: item.duration,
        name: item.songname,
        rid: item.rid
      }
      this.insertSong(song)

      this.$emit('select')
    },
    listScroll () {
      this.$emit('listScroll')
    },
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''

      this.$refs.scroll.$el.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    _getSearch (loadMore = false) {
      if (!loadMore) {
        this.page = 1
        this.$refs.scroll.scrollTo(0, 0)
      }

      getSearch({
        p: this.page,
        w: this.query,
        catZhida: this.showSinger
      }).then((data) => {
        // console.log(data)
        this.loadingTop = false

        if (loadMore) {
          this.result.push(...data.song.list)
        } else {
          this.result = data.song.list
        }

        if (data.zhida && data.zhida.singerid) {
          this.zhida = data.zhida
        }

        this._checkMore(data.song)
      })
    },
    _checkMore (song) {
      if (!song.list.length ||
        (song.curnum + song.curpage * song.curnum) > song.totalnum
      ) {
        this.hasMore = false
      }
    },
    ...mapMutations({
      setSinger: 'SET_SINGER'
    }),
    ...mapActions([
      'insertSong'
    ])
  },
  watch: {
    query () {
      this._getSearch()
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .suggest-wrapper {
    margin-top: 8px
    .suggest-list {
      padding: 0 20px
      li {
        line-height: 36px
        font-size: $font-size-medium
        color: $color-text-d
        .icon-music {
          margin-right: 14px
        }
        &.zhida {
          .icon-mine {
            margin-right: 14px
          }
        }
      }
      .loading {
        margin: 10px 0
        padding-bottom: 10px
      }
    }
    .scroll {
      position: absolute
      top: 156px
      right: 0
      bottom: 0
      left: 0
      overflow: hidden
    }
  }
</style>
